<template>
  <div class="home">
    <el-container>
      <!-- 左侧导航部分 -->
      <el-aside width="auto">
        <div class='logo'></div>
        <!-- router属性用于开启路由模式，下面会将index里面的值作为跳转的路径 -->
        <el-menu :collapse='isCollapse' router default-active="2" background-color="#F9F9F9" class="el-menu-admin" @open="handleOpen" @close="handleClose">
          <!-- 规定index只能是字符串 -->
          <el-submenu :index="item.path" v-for='item in menuList' :key='item.id' >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{item.authName}}</span>
            </template>
              <el-menu-item :index="menu.path" v-for='menu in item.children' :key='menu.id' >
                <i class="el-icon-menu"></i>
                <span>{{menu.authName}}</span>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部部分 -->
        <el-header>
          <div class="toggle-btn myicon myicon-menu" @click='toggle'></div>
          <div class="system-title">电商后台管理系统</div>
          <div class="welcome">
            <span>你好，{{username}} </span>
            <el-button type="warning" round @click='loginout'>退出</el-button>
          </div>
        </el-header>
        <el-main>
          <!-- 中间内容主体部分 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import { getUsetList, getMenus } from '../api'
export default {
  data () {
    return {
      isCollapse: false,
      username: '',
      menuList: []
    }
  },
  created () {
    this.initTable()
  },
  methods: {
    initTable () {
      this.username = localStorage.getItem('username')
      getUsetList({ query: '', pagenum: 1, pagesize: 1 })
        .then(res => {
          // console.log(res)
        })
      getMenus().then(res => {
        // console.log(res)
        this.menuList = res.data
      })
    },
    handleOpen (key, keyPath) {
      // console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      // console.log(key, keyPath)
    },
    // 左侧导航栏折叠展开
    toggle () {
      this.isCollapse = !this.isCollapse
    },
    // 退出登录
    loginout () {
      // 先清除本地token，再跳转到登录页
      localStorage.removeItem('mytoken')
      this.$router.push({ name: 'login' })
    }
  }
}
</script>
<style lang="scss" scoped>
  .home {
    height: 100%;
    .el-menu-admin:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .el-container {
      height: 100%;
    }
    .el-aside {
      background-color: #f9f9f9;
    }
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #409eff;
    }
    .logo {
      height: 60px;
      background: url(../assets/logo.png);
      background-size: cover;
      background-color: white;
    }
    .toggle-btn {
      padding: 0 15px;
      margin-left: -20px;
      font-size: 36px;
      color: white;
      cursor: pointer;
      line-height: 60px;
      &:hover {
        background-color: #4292cf;
      }
    }
    .system-title {
      font-size: 28px;
      color: white;
    }
    .welcome {
      color: white;
    }
  }
</style>
